<script setup>

import PmsEcharts from "@/components/pms-echarts.vue";
import {reactive} from "vue";

const options = reactive({
	value: {
		title: {
			text: '饼状图示例',
			left: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		series: [
			{
				name: '类型',
				type: 'pie',
				radius: '55%',
				center: ['30%', '50%'],
				itemStyle: {
					emphasis: {
						borderWidth: 3,
						borderColor: '#fff'
					},
					borderWidth: 2,
					borderColor: '#fff',
					borderRadius: 5
				},
				data: [
					{value: 335, name: '2010'},
					{value: 310, name: '2011'},
					{value: 234, name: '2012'},
					{value: 135, name: '2013'},
					{value: 1548, name: '2014'},
					{value: 1548, name: '2015'}
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		],
		legend: {
			orient: 'vertical',
			right: 'right',
			top: 'center',
			formatter: function(name) {
				return '{a|'+name+'}'
			},
			textStyle: {
				rich: {
					a: {
						color: 'blue',
						fontSize: 14
					},
					b: {
						color: 'green',
						fontSize: 14
					},
					c: {
						color: 'orange',
						fontSize: 14
					},
					d: {
						color: 'purple',
						fontSize: 14
					},
					e: {
						color: 'red',
						fontSize: 14
					},
					f: {
						color: 'black',
						fontSize: 14
					}
				}
			}
		},
	}
})

console.log(options.value)
setTimeout(() => {
	options.value.xAxis = {
		type: 'category',
		data: ['1', '2', '3', '4', '5', '6', '7']
	}
	console.log(options.value)
}, 2000)
</script>

<template>
	<div>
		<pms-echarts :width="600" :height="300" :options="options.value"></pms-echarts>
	</div>
</template>

<style scoped>

</style>